<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore';
import { getCategoryListAPI, getSellingGoodListByCidAPI, getSellingGoodListByContentAPI } from '@/apis/goods';
import { addToCartAPI } from '@/apis/cart';
import { ElMessage } from 'element-plus';
const route = useRouter();
const userStore = useUserStore()
//用户部分
const userInfo = useUserStore().userInfo


//商品部分
const categoryList = ref([])
const goodList = ref([])
const defaultCid = ref("")
onMounted(async () => {
    let res = await getCategoryListAPI();
    categoryList.value = res.data;

    res = await getSellingGoodListByCidAPI(categoryList.value[0].cid);
    goodList.value = res.data;
    defaultCid.value = categoryList.value[0].cid;
})

const getGoodListByCid = async (cid) => {
    let res = await getSellingGoodListByCidAPI(cid);
    goodList.value = res.data;
}


// 商品详情
const detail = ref({
    visible: 0,
    item: {},
    count: 1
})

const addToCart = async (item, count) => {
    const res = await addToCartAPI(userInfo.data.uid, item.gid, count)
    if (res.code == 1) {
        ElMessage({ type: 'success', message: '添加成功' })
        detail.value.visible = 0;
    }
    else ElMessage({ type: 'info', message: res.msg });
}
//是否折叠
const aside = ref(0)

//搜索
const content = ref("")
const query = async () => {
    const res = await getSellingGoodListByContentAPI(content.value);
    goodList.value = res.data
    ElMessage({ type: 'success', message: '查询成功', duration: '1000' })
}

const switchPlatform = () => {
    ElMessageBox.confirm('切换到管理员平台？', '欢迎您！',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
        }
    ).then(() => {
        route.replace({ path: '/admerLogin' })
    })

}
</script>
<template>
    <!-- <div style="width: 1200px;height:600px;background-color:aqua"></div> -->

    <el-container>
        <!-- 导航栏（搜索，用户名，订单，购物车，退出登录 -->
        <el-header
            style="border-top-right-radius: 5px;border-top-left-radius: 5px; background-color: black;padding: 5px;height: 50px;">
            <el-icon style="position: fixed;top:10px;left:10px;color:#cdcdcd ;" @click="switchPlatform">
                <SwitchFilled />
            </el-icon>
            <div style="width: 1000px; height: 30px;margin: 5px 200px;display: flex;">
                <el-input v-model="content" style="width: 350px; height: 30px;" placeholder="搜一搜"></el-input>
                <el-button @click="query(); aside = 1" style="height: 30px;width: 30px;">
                    <el-icon>
                        <Search />
                    </el-icon>
                </el-button>
                <!-- 登录 -->
                <template v-if="userInfo.code != true">
                    <el-link @click="route.replace({ path: '/userLogin' })" :underline="false"
                        style="margin-left:100px;color: #cdcdcd;">请先登录</el-link>
                </template>
                <template v-else>
                    <el-link @click="route.replace({ path: './userInfo' })" :underline="false"
                        style="margin-left:100px;color: #cdcdcd;">
                        <el-icon style="padding-top: 2px;">
                            <User />
                        </el-icon>{{ userInfo.data.uname }}</el-link>
                    <el-link @click="route.replace({ path: '/order' })" :underline="false" style="color: #cdcdcd;">
                        <el-icon style="padding-top:2px;">
                            <List />
                        </el-icon>我的订单</el-link>
                    <el-link @click="route.replace({ path: '/cart' })" :underline="false" style="color: #cdcdcd;">
                        <el-icon style="padding-top: 2px;">
                            <ShoppingCartFull />
                        </el-icon>我的购物车</el-link>
                    <el-link @click="userInfo.code = 0;" :underline="false" style="color: #cdcdcd;">
                        <el-icon style="padding-top: 2px;">
                            <SwitchButton />
                        </el-icon>退出登录</el-link>
                </template>
            </div>
        </el-header>
        <el-container style="position: relative;">
            <!-- 分类侧边栏 -->
            <template v-if="aside == 0">
                <el-aside style="position: relative; width: 80px;border-bottom-left-radius:5px ;padding-right: 0;">

                    <el-menu background-color="#545c64" :default-active="defaultCid" active-text-color="#ffd04b"
                        text-color="#fff">
                        <el-scrollbar height="620px">
                            <el-menu-item style="text-align: center;" v-for="cate in categoryList" :index="cate.cid"
                                @click="getGoodListByCid(cate.cid)">
                                {{ cate.cname }}
                            </el-menu-item>
                        </el-scrollbar>
                    </el-menu>

                    <el-icon style="position: absolute;top:0px;right:0px;box-shadow: -3px 0px 3px 0px #333;"
                        @click="aside = 1">

                        <DArrowLeft />

                    </el-icon>

                </el-aside>
            </template>
            <template v-else style="position:relative">

                <el-icon style="position: absolute;top:0px;left:0px;box-shadow: 3px 0px 3px 0px #cdcdcd;"
                    @click="aside = 0">
                    <DArrowRight />
                </el-icon>

            </template>
            <!-- 商品展示栏 -->
            <el-main style="padding:0px;background-color: white;">
                <ul style="display: flex;list-style: none;">
                    <el-scrollbar height="588px">
                        <li style="transition: all 0.5s; margin: 20px; width:220px;height:300px;display: inline-block;background-color: white;"
                            v-for=" item  in  goodList " @click="detail.visible = 1; detail.item = item; detail.count = 1">
                            <img :src="item.src" alt="" style="width: 160px;height: 160px;margin:0px 30px">
                            <p
                                style="text-align: center;margin: 0px auto;width:160px;height:30px;padding-top: 10px;text-overflow:ellipsis;overflow: hidden;white-space:nowrap;">
                                {{ item.gname }}</p>
                            <p
                                style="text-align: center;margin: 0px auto;width:160px;height:30px;padding-top:10px;font-size: smaller;color:#cdcdcd;text-overflow:ellipsis;overflow: hidden;white-space:nowrap;">
                                {{ item.desc }}</p>
                            <p style="text-align: center;margin: 0px;padding-top: 10px;color:#cf4444;font-size:20px;">
                                ￥{{ item.price }}</p>

                        </li>
                    </el-scrollbar>
                </ul>
                <!-- 商品详情 -->
                <el-dialog v-model="detail.visible" title="商品详情"
                    style="width: 900px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    height: 500px;">
                    <div style="display: flex;justify-content: space-evenly;">
                        <div style="width: 400px;height: 400px;">
                            <img :src="detail.item.src" alt="" style="width: 400px;height: 400px;">
                        </div>
                        <div style="width: 400px;height: 400px;">
                            <div style="height: 60px;">
                                <p
                                    style="text-overflow:ellipsis;overflow: hidden;white-space:nowrap;font-size: 22px;color: #333;margin-block-start: 0;margin-block-end: 0;">
                                    {{ detail.item.gname }}</p>
                                <p style="text-overflow:ellipsis;white-space:wrap;font-size:1em;color: #999;">
                                    {{ detail.item.desc }}
                                </p>
                                <p style="color:#cf4444;font-size:20px;">￥{{ detail.item.price }}</p>
                                <p>---请选择商品数量---</p>
                                <el-input-number style="margin: 40px 0px;;" size="large" min="1"
                                    v-model="detail.count"></el-input-number>
                                <div>
                                    <el-button @click="addToCart(detail.item, detail.count)"
                                        style="width: 100px;margin-top:20px;height: 50px;font-size: 14px;">加入购物车</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-dialog>
            </el-main>

        </el-container>
    </el-container>
</template>
<style scoped>
.el-link:hover {

    font-size: 15px
}

.el-link {
    width: 120px
}

.el-main li:hover {
    box-shadow: 0px 0px 3px 3px #cdcdcd;

}

.el-container .el-icon:hover {
    color: #cdcdcd;
}

.el-aside .el-icon:hover {
    color: white
}
</style>